<template>
  <div id="questionBank-modal">
    <a-form
      ref="formRef"
      :rules="rules"
      :model="form"
      @submit-success="handleSubmit"
    >
      <a-form-item field="title" label="标题：" validate-trigger="blur">
        <a-input v-model="form.title" placeholder="请输入标题" />
      </a-form-item>
      <a-form-item field="description" label="描述：" validate-trigger="blur">
        <a-textarea v-model="form.description" placeholder="请输入描述" />
      </a-form-item>
      <a-form-item field="picture" label="题库图片：" validate-trigger="blur">
        <MyImgUpload></MyImgUpload>
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" html-type="submit" style="width: 150px"
            >{{ props.title }}
          </a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import {
  QuestionBankControllerService,
  UserControllerService,
} from "../../../generated";
import store from "@/store";
import MyImgUpload from "@/components/MyImgUpload.vue";
import notification from "@arco-design/web-vue/es/notification";

const props = defineProps(["closeModal", "title"]);

const rules = {
  title: [{ required: true, message: "标题不能为空！" }],
};

interface FormState {
  title: string;
  description: string;
  picture?: string;
}

const form = reactive<FormState>({
  title: "",
  description: "",
  picture:
    "https://pic.code-nav.cn/mianshiya/question_bank_picture/1777886594896760834/JldkWf9w_JavaScript.png",
});

const handleSubmit = (values: any) => {
  QuestionBankControllerService.addQuestionBankUsingPost({ ...values }).then(
    (res) => {
      if (res.code === 0) {
        notification.success("新建题库成功");
      } else {
        notification.success("新建题库失败");
      }
    }
  );
  props.closeModal();
};
</script>
